<template>
  <div class="side">
    <div class="title">产品目录</div>
    <van-tabs v-model="active" animated line-width="5rem" line-color="red">
      <van-tab v-for="tab in tabs" :title="tab.name" :key="`type_${tab.type}`">
        <div class="tab-content">
          <div class="cell-list" v-for="(item, i) in algorithms" :key="`cell_${tab.type}_${i}`" @click="groupClicked(item.id)">
            <template v-if="item.type === tab.type">
              <van-cell center>
                <template #title>
                  <div class="cell-title">
                    <img :src="`imgs/${item.icon}.png`" class="title-img" alt="">
                    <span class="custom-title">{{item.name}}</span>
                  </div>
                </template>
                <template #right-icon>
                  <van-icon :class="{'active': activeCell === item.id}" name="arrow-down"></van-icon>
                </template>
              </van-cell>
              <div class="menu" v-show="activeCell === item.id">
                <div v-for="(it, n) in item.list" :key="`menu_${tab.type}_${i}_${n}`" @click.stop="algorithmClick(it.id)"
                     :class="{'active': activeMenu === it.id}">
                  <div class="menu-title">
                    <span>{{it.title}}</span>
                    <van-icon name="arrow"></van-icon>
                  </div>
                  <div class="menu-msg">{{it.msg}}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AlgorithmGroup } from '@/model/algorithm'
import { algorithms } from '@/store/modules/Algorithm'

interface tabDesc {
  name: string
  type: number
}

@Component
export default class SideView extends Vue {
  tabs :tabDesc[] = [{ name: '通用算法', type: 0 }, { name: '业务算法', type: 1 }]
  private active = 0
  private activeCell = ''

  get algorithms () : AlgorithmGroup[] {
    return algorithms.list
  }

  get activeMenu () : string {
    return this.$store.state.var.activeMenu
  }

  groupClicked (id: string) : void {
    if (this.activeCell === id) {
      this.activeCell = ''
    } else {
      this.activeCell = id
    }
  }

  created () {
    let algorithmName = ''
    algorithms.list.forEach(group => {
      group.list.forEach(algorithm => {
        if (algorithm.id === this.$route.params.id) {
          this.activeCell = group.id
          algorithmName = algorithm.title
        }
        if (algorithm.id === this.$store.state.var.algoId) {
          this.activeCell = group.id
          algorithmName = algorithm.title
        }
      })
    })
    if (algorithmName === '') {
      this.activeCell = algorithms.list[0].id
      this.$store.state.var.activeMenu = algorithms.list[0].list[0].id
      this.$router.push('/' + algorithms.list[0].list[0].id)
    }
  }

  algorithmClick (id: string) : void {
    if (this.$route.params.id !== id) {
      this.$router.push('/' + id)
      this.$store.state.var.show = false
      this.$store.state.var.lastActiveMenu = this.$store.state.var.activeMenu
    }
    this.$store.state.var.activeMenu = id
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-tabs__line {
  background: #323333;
}
/deep/ .van-tab {
  font-size: 1rem;
  color: #929292;
}
/deep/ .van-tab--active {
  color: #323333;
}
.title {
  height: 2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.25rem;
  font-size: 1.25rem;
  color: #323333;
  .title-svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.tab-content {
  padding: 1.25rem;
}
.cell-list {
  // min-height: 3.75rem;
  background: #ffffff;
  border: 0 solid #f2f2f2;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 0.75rem;
  // display: flex;
  // align-items: center;
  .menu {
    padding: 0 1.25rem 1.25rem;
    color: #323333;
    font-size: 14/16rem;
    transition: height 0.3s ease-in-out;
    will-change: height;
    overflow: hidden;
    .menu-title {
      line-height: 24/16rem;
      display: flex;
      justify-content: space-between;
      margin-top: 0.75rem;
      align-items: center;
    }
    .menu-msg {
      line-height: 24/16rem;
      color: #929292;
    }
    .active {
      color: #167aa0;
      .menu-msg {
        color: #8abccf;
      }
    }
  }
}
.cell-title {
  display: flex;
  align-items: center;
  .title-img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
  }
}
.active::before {
  transform: rotate(180deg);
  transition: transform 0.3s, -webkit-transform 0.3s;
}
</style>
